"use client";

import React, { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

// Helper para unir classes do Tailwind de forma segura
const cn = (...inputs) => {
  return twMerge(clsx(inputs));
};

// --- Função de Rolagem Suave para Navegação ---
const handleNavClick = (e, targetId) => {
  e.preventDefault();
  const element = document.getElementById(targetId);
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' });
  }
};

// --- Ícones SVG embutidos ---
const IconStar = ({ size = 24, fill = "none", className = "" }) => (
    <svg xmlns="http://www.w3.org/2000/svg" className={cn("icon icon-tabler icon-tabler-star", className)} width={size} height={size} viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" fill={fill} strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path>
    </svg>
);

const IconChevronDown = ({ className = "" }) => (
  <svg xmlns="http://www.w3.org/2000/svg" className={cn("icon icon-tabler icon-tabler-chevron-down", className)} width="24" height="24" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" fill="none" strokeLinecap="round" strokeLinejoin="round">
    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
    <path d="M6 9l6 6l6 -6"></path>
  </svg>
);

const IconWhatsApp = ({ className = "" }) => (
    <svg xmlns="http://www.w3.org/2000/svg" className={cn(className)} width="32" height="32" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" fill="none" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
        <path d="M3 21l1.65 -3.8a9 9 0 1 1 3.4 2.9l-5.05 .9" />
        <path d="M9 10a.5 .5 0 0 0 1 0v-1a.5 .5 0 0 0 -1 0v1a5 5 0 0 0 5 5h1a.5 .5 0 0 0 0 -1h-1a.5 .5 0 0 0 0 1" />
    </svg>
);


// --- Variantes de Animação ---
const fadeIn = {
  initial: { opacity: 0, y: 20 },
  animate: { opacity: 1, y: 0 },
  transition: { duration: 0.6, ease: "easeInOut" }
};

// --- Dados da Aplicação ---
const benefitsData = [
  {
    title: "Reduz Rugas e Linhas de Expressão",
    description: "Nossa fórmula avançada atua diretamente na estrutura da pele, suavizando marcas existentes e prevenindo o surgimento de novas para um rosto visivelmente mais liso.",
    beforeImage: "https://i.imgur.com/sTvEyzw.png",
    afterImage: "https://i.imgur.com/xdzrVBu.png"
  },
  {
    title: "Mais Firmeza e Elasticidade",
    description: "Estimula a produção de colágeno, restaurando a firmeza e a elasticidade perdidas com o tempo, para um contorno facial mais definido e uma pele mais 'preenchida'.",
    beforeImage: "https://i.imgur.com/qS0sUHT.png",
    afterImage: "https://i.imgur.com/pUO1goN.png"
  },
  {
    title: "Pele Uniforme e Iluminada",
    description: "Melhora a textura e uniformiza o tom da pele, diminuindo manchas e revelando um brilho saudável e natural que rejuvenesce a aparência.",
    beforeImage: "https://i.imgur.com/IztkXm9.png",
    afterImage: "https://i.imgur.com/ty0U909.png"
  }
];

const testimonials = [
    { name: "Fernanda", age: 52, role: "Empresária", location: "São Paulo", quote: "Eu nunca acreditei muito em séruns milagrosos, mas resolvi dar uma chance. Estou impressionada! O melhor é o efeito lifting imediato que ele dá, perfeito para usar antes de sair. A pele fica mais firme na hora. Finalmente um produto que entrega o que promete.", avatar: "https://placehold.co/100x100/EFEFEF/4A4A4A?text=F" },
    { name: "Helena", age: 58, role: "Professora Aposentada", location: "Curitiba", quote: "Depois de uma certa idade, a gente começa a não se reconhecer no espelho. Esse sérum me devolveu a vontade de me cuidar. Minhas marcas de expressão na testa, que me incomodavam tanto, estão muito mais suaves.", avatar: "https://placehold.co/100x100/EFEFEF/4A4A4A?text=H" },
    { name: "Beatriz", age: 35, role: "Dentista", location: "Minas Gerais", quote: "Depois da gravidez, minha pele ficou muito sem vida e estressada. O Hyalu Renew parece que acalmou meu rosto! A vermelhidão diminuiu e aquela aparência de cansaço constante sumiu. É meu momento de autocuidado.", avatar: "https://placehold.co/100x100/EFEFEF/4A4A4A?text=B" },
    { name: "Larissa", age: 33, role: "Engenheira Civil", location: "São Paulo", quote: "Tenho 33 anos, mas já estava notando linhas de expressão na testa. O Hyalu Renew foi meu primeiro 'investimento' anti-idade. A textura é um sonho e as linhas estão visivelmente mais suaves. Prevenir é melhor que remediar!", avatar: "https://placehold.co/100x100/EFEFEF/4A4A4A?text=L" },
    { name: "Teresa", age: 57, role: "Servidora Pública", location: "Goiânia/GO", quote: "A menopausa mudou completamente minha pele. O Hyalu Renew ajudou a devolver a 'estrutura' do meu rosto. Sinto a pele mais preenchida, mais forte, e aquela sensação de papel amassado diminuiu muito.", avatar: "https://placehold.co/100x100/EFEFEF/4A4A4A?text=T" },
];

const faqItems = [
    { q: "É seguro comprar?", a: "Sim, 100% seguro. Usamos criptografia SSL para proteger seus dados e seguimos a LGPD. Sua compra é totalmente segura." },
    { q: "Vou receber um código de rastreio?", a: "Com certeza. Após a confirmação do envio, você recebe o código de rastreio por e-mail para acompanhar seu pedido em tempo real." },
    { q: "O sérum funciona mesmo?", a: "Sim. A eficácia do Hyalu Renew é baseada em tecnologia avançada e ingredientes de alta performance. Os resultados são comprovados por milhares de clientes satisfeitas." },
    { q: "Posso pagar quando chegar?", a: "Não trabalhamos com pagamento na entrega, pois emitimos Nota Fiscal antes de enviar. Para sua segurança, aceitamos PIX e Cartão de Crédito em até 12x no momento da compra." },
    { q: "Qual a forma de pagamento?", a: "Aceitamos PIX (aprovação imediata) e Cartão de Crédito em até 12x para facilitar sua compra." },
    { q: "Tem frete grátis?", a: "Sim! Oferecemos frete grátis para todo o Brasil em compras a partir de R$ 100. Para valores menores, o custo pode ser calculado no carrinho com seu CEP." }
];

const pricingPlans = [
    {
        title: "1 Unidade",
        productName: "Hyalu Renew - Ácido Hialurônico e Colágeno",
        price: "87,00",
        originalPrice: "150,00",
        discount: "42%",
        installments: "em até 12 Vezes",
        popular: false,
        imageSrc: "https://i.imgur.com/OciUS5a.png",
        link: "https://seguro.rosaaruma.com/r/BAF9LWBW1V"
    },
    {
        title: "2 Unidades",
        productName: "Hyalu Renew - Ácido Hialurônico e Colágeno",
        price: "150,00",
        originalPrice: "300,00",
        discount: "50%",
        installments: "em até 12 Vezes",
        popular: false,
        imageSrc: "https://i.imgur.com/4sO6gWs.png",
        link: "https://seguro.rosaaruma.com/r/KXVEJP24RZ"
    },
    {
        title: "3 Unidades",
        productName: "Hyalu Renew - Ácido Hialurônico e Colágeno",
        price: "180,00",
        originalPrice: "450,00",
        discount: "60%",
        installments: "em até 12 Vezes",
        popular: true,
        imageSrc: "https://i.imgur.com/6qEqlMt.png",
        link: "https://seguro.rosaaruma.com/r/585X4DFGP7"
    },
];


// --- Componente Principal da Aplicação (Gerenciador de Páginas) ---
export default function App() {
  const [currentPage, setCurrentPage] = useState('home');

  const navigateTo = (page) => {
    setCurrentPage(page);
    window.scrollTo(0, 0);
  };

  const renderPage = () => {
    switch (currentPage) {
      case 'privacy':
        return <PrivacyPolicyPage navigateTo={navigateTo} />;
      case 'terms':
        return <TermsOfUsePage navigateTo={navigateTo} />;
      case 'shipping':
        return <ShippingPolicyPage navigateTo={navigateTo} />;
      case 'home':
      default:
        return <HomePage navigateTo={navigateTo} />;
    }
  };

  return (
    <>
      <style>{`
        html {
          scroll-behavior: smooth;
        }
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
      `}</style>
      <div className="bg-white text-gray-800 font-sans antialiased">
        {renderPage()}
        <WhatsAppButton />
      </div>
    </>
  );
}

// --- Componente da Página Inicial ---
const HomePage = ({ navigateTo }) => {
  return (
    <>
      <NavBar navigateTo={navigateTo} />
      <main>
        <HeroSection />
        <FeaturesSection />
        <TestimonialsSection />
        <FAQSection />
        <PricingSection />
      </main>
      <Footer navigateTo={navigateTo} />
    </>
  );
};

// --- Componentes das Páginas de Políticas ---
const PolicyPageLayout = ({ title, children, navigateTo }) => (
    <>
        <header className="sticky top-0 bg-white/80 backdrop-blur-sm shadow-sm z-50">
            <div className="max-w-7xl mx-auto px-6 h-20 flex justify-center md:justify-between items-center">
                <a href="#home" onClick={(e) => { e.preventDefault(); navigateTo('home'); }}>
                    <img src="https://i.imgur.com/RlWJsrh.png" alt="Rosa Arumã Logo" className="h-16 md:h-14" />
                </a>
                <a href="#home" onClick={(e) => { e.preventDefault(); navigateTo('home'); }} className="hidden md:block text-gray-600 hover:text-blue-600 transition-colors duration-300 font-semibold">
                    Voltar à Loja
                </a>
            </div>
        </header>
        <main className="py-16 md:py-24">
            <div className="max-w-4xl mx-auto px-6">
                <div className="prose lg:prose-lg">
                    <h1>{title}</h1>
                    {children}
                </div>
            </div>
        </main>
        <Footer navigateTo={navigateTo} />
    </>
);

const PrivacyPolicyPage = ({ navigateTo }) => (
  <PolicyPageLayout title="Política de Privacidade" navigateTo={navigateTo}>
    <p><strong>Última atualização:</strong> 10 de Agosto de 2025</p>
    <p>A sua privacidade é importante para nós. É política da <strong>Rosa Arumã</strong> respeitar a sua privacidade em relação a qualquer informação sua que possamos coletar no site <a href="https://rosaaruma.com">https://rosaaruma.com</a>, e outros sites que possuímos e operamos.</p>
    
    <h2>1. Informações que Coletamos</h2>
    <p>Coletamos informações por meios justos e legais, com o seu conhecimento e consentimento. Também informamos por que estamos coletando e como será usado.</p>
    <p><strong>Dados Pessoais:</strong></p>
    <ul>
      <li>Nome completo</li>
      <li>Endereço de e-mail</li>
      <li>CPF</li>
      <li>Número de telefone</li>
      <li>Endereço de entrega e cobrança</li>
      <li>Informações de pagamento (processadas por um gateway seguro, não armazenamos dados de cartão de crédito)</li>
    </ul>
    <p><strong>Dados de Navegação:</strong></p>
    <ul>
      <li>Endereço IP</li>
      <li>Tipo e versão do navegador</li>
      <li>Páginas visitadas</li>
      <li>Tempo gasto nas páginas</li>
      <li>Cookies e dados de uso</li>
    </ul>

    <h2>2. Como Usamos Suas Informações</h2>
    <p>Utilizamos as informações que coletamos para:</p>
    <ul>
      <li>Processar, faturar e enviar seus pedidos.</li>
      <li>Comunicar com você sobre seu pedido, incluindo confirmações e atualizações de envio.</li>
      <li>Fornecer suporte ao cliente.</li>
      <li>Melhorar e personalizar sua experiência de compra.</li>
      <li>Enviar e-mails de marketing e promoções (com seu consentimento), dos quais você pode se desinscrever a qualquer momento.</li>
      <li>Cumprir obrigações legais e fiscais.</li>
    </ul>

    <h2>3. Compartilhamento de Informações</h2>
    <p>Não compartilhamos suas informações de identificação pessoal publicamente ou com terceiros, exceto quando exigido por lei ou para viabilizar nossos serviços (por exemplo, com empresas de transporte para entrega e gateways de pagamento para processar a compra).</p>

    <h2>4. Segurança dos Dados</h2>
    <p>Empregamos medidas de segurança comercialmente aceitáveis para proteger seus dados contra perda ou roubo, bem como acesso, divulgação, cópia, uso ou modificação não autorizados. Utilizamos criptografia SSL (Secure Socket Layer) para proteger os dados transmitidos.</p>

    <h2>5. Cookies</h2>
    <p>Utilizamos cookies para melhorar a sua experiência em nosso site. Cookies são pequenos arquivos de dados que são armazenados no seu dispositivo. Eles nos ajudam a entender suas preferências e otimizar nosso site. Você pode configurar seu navegador para recusar cookies, mas isso pode impedir o funcionamento de algumas partes do nosso site.</p>

    <h2>6. Seus Direitos</h2>
    <p>Você tem o direito de acessar, corrigir ou excluir suas informações pessoais. Você também pode se opor ao processamento de seus dados para fins de marketing. Para exercer esses direitos, entre em contato conosco.</p>

    <h2>7. Contato</h2>
    <p>Se você tiver alguma dúvida sobre como lidamos com dados do usuário e informações pessoais, entre em contato conosco:</p>
    <p><strong>Rosa Arumã</strong><br/>
    <strong>CNPJ:</strong> 54.078.745/001-00<br/>
    <strong>Endereço:</strong> Av. Marques Figueira, Vila Figueira, Suzano-SP CEP: 08676-010<br/>
    <strong>Email:</strong> Contato@rosaaruma.com<br/>
    <strong>Telefone:</strong> (11) 98150-0365</p>
  </PolicyPageLayout>
);

const TermsOfUsePage = ({ navigateTo }) => (
  <PolicyPageLayout title="Termos de Uso" navigateTo={navigateTo}>
    <p><strong>Última atualização:</strong> 10 de Agosto de 2025</p>
    <p>Bem-vindo à <strong>Rosa Arumã</strong>! Ao acessar e usar nosso site <a href="https://rosaaruma.com">https://rosaaruma.com</a>, você concorda em cumprir e estar vinculado aos seguintes termos e condições de uso.</p>
    
    <h2>1. Aceitação dos Termos</h2>
    <p>Ao usar este site, você confirma que leu, entendeu e concorda com estes Termos de Uso e com nossa Política de Privacidade. Se você não concorda com estes termos, por favor, não use nosso site.</p>

    <h2>2. Uso do Site</h2>
    <p>Você concorda em usar o site apenas para fins legais e de uma maneira que não infrinja os direitos de, restrinja ou iniba o uso e gozo do site por qualquer terceiro.</p>

    <h2>3. Propriedade Intelectual</h2>
    <p>Todo o conteúdo presente neste site, incluindo, mas não se limitando a, textos, gráficos, logos, imagens, clipes de áudio, downloads digitais e software, é propriedade da <strong>Rosa Arumã</strong> ou de seus fornecedores de conteúdo e protegido pelas leis de direitos autorais.</p>

    <h2>4. Produtos e Preços</h2>
    <ul>
      <li><strong>Descrição:</strong> Nos esforçamos para ser o mais precisos possível na descrição dos nossos produtos. No entanto, não garantimos que as descrições dos produtos ou outro conteúdo do site sejam precisos, completos, confiáveis, atuais ou livres de erros.</li>
      <li><strong>Preços:</strong> Todos os preços estão sujeitos a alterações sem aviso prévio. Reservamo-nos o direito de modificar ou descontinuar um produto a qualquer momento.</li>
    </ul>

    <h2>5. Compras e Pagamentos</h2>
    <p>Ao realizar uma compra, você concorda em fornecer informações atuais, completas e precisas de compra e conta. O pagamento deve ser realizado através dos métodos disponíveis no site. Reservamo-nos o direito de recusar qualquer pedido que você fizer conosco.</p>

    <h2>6. Limitação de Responsabilidade</h2>
    <p>A <strong>Rosa Arumã</strong> não será responsável por quaisquer danos diretos, indiretos, incidentais, especiais ou consequenciais que resultem do uso ou da incapacidade de usar nosso site ou produtos.</p>

    <h2>7. Modificações nos Termos</h2>
    <p>Reservamo-nos o direito de atualizar ou modificar estes Termos de Uso a qualquer momento, sem aviso prévio. O uso do site após tais alterações constitui sua concordância em seguir e estar vinculado aos Termos de Uso modificados.</p>

    <h2>8. Lei Aplicável</h2>
    <p>Estes Termos de Uso e quaisquer acordos separados por meio dos quais fornecemos serviços a você serão regidos e interpretados de acordo com as leis do Brasil.</p>

    <h2>9. Contato</h2>
    <p>Para qualquer dúvida sobre estes Termos de Uso, entre em contato conosco:</p>
    <p><strong>Rosa Arumã</strong><br/>
    <strong>Email:</strong> Contato@rosaaruma.com<br/>
    <strong>Telefone:</strong> (11) 98150-0365</p>
  </PolicyPageLayout>
);

const ShippingPolicyPage = ({ navigateTo }) => (
  <PolicyPageLayout title="Política de Frete" navigateTo={navigateTo}>
    <p><strong>Última atualização:</strong> 10 de Agosto de 2025</p>
    <p>Na <strong>Rosa Arumã</strong>, queremos que sua experiência de compra seja a melhor possível, do início ao fim. Abaixo, detalhamos nossa política de frete.</p>
    
    <h2>1. Processamento de Pedidos</h2>
    <ul>
      <li>Todos os pedidos são processados e preparados para envio em até <strong>2 (dois) dias úteis</strong> após a confirmação do pagamento.</li>
      <li>Pedidos realizados em fins de semana ou feriados serão processados no próximo dia útil.</li>
    </ul>

    <h2>2. Formas de Envio</h2>
    <ul>
      <li>Trabalhamos com os <strong>Correios</strong> e as melhores <strong>transportadoras</strong> do mercado para garantir que seu pedido chegue com segurança e rapidez.</li>
      <li>A escolha da transportadora dependerá da sua localidade para otimizar o prazo de entrega.</li>
    </ul>

    <h2>3. Prazos de Entrega</h2>
    <ul>
      <li>O prazo de entrega varia de acordo com o CEP de destino e a modalidade de envio escolhida.</li>
      <li>Você poderá visualizar uma <strong>estimativa do prazo de entrega</strong> ao inserir seu CEP no carrinho de compras.</li>
      <li>O prazo de entrega começa a contar a partir do dia útil seguinte à postagem do pedido.</li>
    </ul>

    <h2>4. Custo do Frete</h2>
    <ul>
      <li><strong>Frete Grátis:</strong> Oferecemos frete grátis para todo o Brasil em compras <strong>a partir de R$ 100,00</strong>.</li>
      <li><strong>Cálculo do Frete:</strong> Para compras abaixo de R$ 100,00, o custo do frete é calculado com base no peso dos produtos e no CEP de destino. O valor será exibido no seu carrinho de compras antes da finalização do pedido.</li>
    </ul>
    
    <h2>5. Rastreamento de Pedidos</h2>
    <ul>
      <li>Assim que seu pedido for postado, você receberá um <strong>código de rastreio</strong> por e-mail.</li>
      <li>Com este código, você poderá acompanhar o status da sua entrega em tempo real no site da transportadora correspondente.</li>
    </ul>

    <h2>6. Tentativas de Entrega</h2>
    <ul>
      <li>As transportadoras geralmente realizam até 3 (três) tentativas de entrega no endereço informado.</li>
      <li>Caso não seja possível realizar a entrega, o pedido poderá retornar ao nosso centro de distribuição. Nesse caso, entraremos em contato para combinar um novo envio, que poderá ter um novo custo de frete.</li>
    </ul>

    <h2>7. Dúvidas</h2>
    <p>Se tiver qualquer dúvida sobre sua entrega, entre em contato com nossa equipe de atendimento:</p>
    <p><strong>Email:</strong> Contato@rosaaruma.com<br/>
    <strong>Telefone:</strong> (11) 98150-0365</p>
  </PolicyPageLayout>
);


// --- Componentes da Página Inicial (continuação) ---

const NavBar = ({ navigateTo }) => (
  <header className="fixed top-0 left-0 right-0 bg-white/80 backdrop-blur-sm shadow-sm z-50">
    <div className="max-w-7xl mx-auto px-6 h-20 flex justify-center md:justify-between items-center">
      <a href="#inicio" onClick={(e) => handleNavClick(e, 'inicio')}>
        <img src="https://i.imgur.com/RlWJsrh.png" alt="Rosa Arumã Logo" className="h-16 md:h-14" />
      </a>
      <nav className="hidden md:flex items-center space-x-8">
        {["Inicio", "Benefícios", "Depoimento", "Comprar"].map((item) => {
          const targetId = item.toLowerCase().replace('ç', 'c');
          return(
            <a 
              key={item} 
              href={`#${targetId}`} 
              onClick={(e) => handleNavClick(e, targetId)}
              className="text-gray-600 hover:text-blue-600 transition-colors duration-300"
            >
              {item}
            </a>
          );
        })}
      </nav>
      <a href="#comprar" onClick={(e) => handleNavClick(e, 'comprar')} className="hidden md:inline-block bg-blue-600 text-white font-semibold px-5 py-2 rounded-lg hover:bg-blue-700 transition-transform duration-300 hover:scale-105">
        Comprar agora
      </a>
    </div>
  </header>
);

const HeroSection = () => (
  <section id="inicio" className="relative overflow-hidden bg-gray-50 pt-20 md:pt-24">
     <div className="absolute inset-0 -z-10 bg-[radial-gradient(40%_100%_at_50%_0%,_rgba(180,210,255,0.3),_rgba(255,255,255,0)_100%)]"></div>
    <div className="max-w-7xl mx-auto px-6 py-16 md:py-20">
      <motion.div
        className="grid md:grid-cols-2 gap-12 items-center"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.8 }}
      >
        <div className="text-center md:text-left">
          <motion.div variants={fadeIn} className="inline-block bg-blue-100 text-blue-800 text-sm font-semibold px-4 py-1 rounded-full mb-4">
            +5 mil unidades vendidas | Top 1 Rejuvenecedor Facial
          </motion.div>
          <motion.h1 variants={fadeIn} className="text-4xl md:text-5xl font-extrabold text-gray-900 leading-tight">
            Sérum Anti-Idade Hyalu Renew: Redução de Rugas e Linhas de Expressão.
          </motion.h1>
          
          {/* Imagem visível apenas em mobile */}
          <motion.div variants={fadeIn} className="flex justify-center items-center md:hidden my-8">
            <img src="https://i.imgur.com/J13SKOl.png" alt="Sérum Hyalu Renew" className="max-w-xs w-full object-contain" />
          </motion.div>

          <motion.p variants={fadeIn} className="mt-6 text-lg text-gray-600 max-w-xl mx-auto md:mx-0">
            Em poucas semanas, perceba uma pele com menos rugas e flacidez.
          </motion.p>
          <motion.div variants={fadeIn} className="mt-8 flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
            <a href="#comprar" onClick={(e) => handleNavClick(e, 'comprar')} className="bg-blue-600 text-white font-bold text-center px-8 py-4 rounded-lg hover:bg-blue-700 transition-transform duration-300 hover:scale-105 shadow-lg">
              Comprar com 40% Off + Frete Grátis
            </a>
            <a href="#beneficios" onClick={(e) => handleNavClick(e, 'beneficios')} className="bg-gray-200 text-gray-800 font-bold text-center px-8 py-4 rounded-lg hover:bg-gray-300 transition-all duration-300">
              Ver os Benefícios
            </a>
          </motion.div>
          <motion.p variants={fadeIn} className="mt-6 text-sm text-gray-500 font-semibold">
            5.000+ unidades Vendidas, ⭐⭐⭐⭐⭐(4.8) 98% de Aprovação
          </motion.p>
        </div>
        
        {/* Imagem visível apenas em desktop */}
        <motion.div 
            variants={fadeIn} 
            className="hidden md:flex justify-center items-center"
            initial={{ scale: 0.9, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            transition={{ delay: 0.2, duration: 0.8, ease: "easeOut" }}
        >
            <img src="https://i.imgur.com/J13SKOl.png" alt="Sérum Hyalu Renew" className="max-w-sm md:max-w-md w-full object-contain" />
        </motion.div>
      </motion.div>
    </div>
  </section>
);

const FeaturesSection = () => (
  <section id="beneficios" className="pt-12 md:pt-16 pb-8 md:pb-12 bg-gray-50">
    <div className="max-w-7xl mx-auto px-6">
        <motion.div 
            initial="initial" whileInView="animate" viewport={{ once: true }} variants={fadeIn}
            className="text-center mb-16"
        >
            <h2 className="text-4xl font-extrabold text-gray-900">Resultados que Você Pode Ver</h2>
            <p className="mt-4 text-lg text-gray-600 max-w-3xl mx-auto">Veja a transformação real que o Hyalu Renew proporciona. Os resultados falam por si.</p>
        </motion.div>

        <div className="space-y-20">
            {benefitsData.map((benefit, index) => (
                <motion.div 
                    key={benefit.title}
                    initial="initial" whileInView="animate" viewport={{ once: true, amount: 0.3 }} variants={fadeIn}
                    className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"
                >
                    <div className={cn("text-center md:text-left", index % 2 !== 0 && "md:order-2")}>
                        <h3 className="text-3xl font-bold text-gray-900">{benefit.title}</h3>
                        <p className="mt-4 text-lg text-gray-600">{benefit.description}</p>
                        <a href="#comprar" onClick={(e) => handleNavClick(e, 'comprar')} className="mt-6 inline-block bg-blue-600 text-white font-semibold px-8 py-3 rounded-lg hover:bg-blue-700 transition-colors">
                            Quero esse resultado
                        </a>
                    </div>
                    <div className={cn("relative", index % 2 !== 0 && "md:order-1")}>
                        <div className="flex gap-4 justify-center">
                            <div className="w-1/2">
                                <img src={benefit.beforeImage} alt="Antes de usar o produto" className="rounded-xl shadow-lg w-full h-auto object-cover"/>
                                <p className="text-center mt-3 font-semibold text-gray-500">Antes</p>
                            </div>
                            <div className="w-1/2">
                                <img src={benefit.afterImage} alt="Depois de usar o produto" className="rounded-xl shadow-lg w-full h-auto object-cover border-2 border-blue-500"/>
                                <p className="text-center mt-3 font-semibold text-blue-600">Depois</p>
                            </div>
                        </div>
                    </div>
                </motion.div>
            ))}
        </div>
    </div>
  </section>
);

const TestimonialsSection = () => (
    <section id="depoimento" className="pt-8 md:pt-12 pb-20 md:pb-28 bg-gray-50 overflow-hidden">
        <div className="max-w-7xl mx-auto px-6">
            <motion.div initial="initial" whileInView="animate" viewport={{ once: true }} variants={fadeIn} className="text-center mb-12">
                <h2 className="text-4xl font-extrabold text-gray-900">Resultados Reais, Clientes Satisfeitas</h2>
                <p className="mt-4 text-lg text-gray-600">Veja o que nossas clientes estão dizendo.</p>
            </motion.div>
        </div>
        <div className="relative flex items-center">
            <div className="flex w-full overflow-x-auto pb-8 space-x-6 scrollbar-hide px-6">
                {testimonials.map((t, index) => (
                    <div key={index} className="w-[calc(90vw-2rem)] md:w-[450px] flex-shrink-0">
                        <div className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100 h-full flex flex-col">
                            <div className="flex text-yellow-400 mb-4">
                                {[...Array(5)].map((_, i) => <IconStar key={i} size={20} fill="currentColor" />)}
                            </div>
                            <blockquote className="text-gray-600 italic flex-grow">"{t.quote}"</blockquote>
                            <div className="mt-6 flex items-center">
                                <img src={t.avatar} alt={t.name} className="w-14 h-14 rounded-full object-cover mr-4" />
                                <div>
                                    <p className="font-bold text-gray-900">{t.name}, {t.age} anos</p>
                                    <p className="text-sm text-gray-500">{t.role} - {t.location}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    </section>
);

const FAQSection = () => {
    const [openIndex, setOpenIndex] = useState(null);

    return (
        <section id="faq" className="py-20 md:py-28 bg-white">
            <div className="max-w-3xl mx-auto px-6">
                <motion.div initial="initial" whileInView="animate" viewport={{ once: true }} variants={fadeIn} className="text-center mb-12">
                    <h2 className="text-4xl font-extrabold text-gray-900">Perguntas Frequentes</h2>
                </motion.div>
                <div className="space-y-4">
                    {faqItems.map((item, index) => (
                        <div key={index} className="border-b border-gray-200 pb-4">
                            <button
                                onClick={() => setOpenIndex(openIndex === index ? null : index)}
                                className="w-full flex justify-between items-center text-left py-2"
                            >
                                <span className="font-semibold text-lg text-gray-800">{item.q}</span>
                                <motion.div animate={{ rotate: openIndex === index ? 180 : 0 }}>
                                    <IconChevronDown className="text-gray-500" />
                                </motion.div>
                            </button>
                            <AnimatePresence>
                                {openIndex === index && (
                                    <motion.div
                                        initial={{ opacity: 0, height: 0 }}
                                        animate={{ opacity: 1, height: 'auto' }}
                                        exit={{ opacity: 0, height: 0 }}
                                        transition={{ duration: 0.3, ease: 'easeInOut' }}
                                        className="overflow-hidden"
                                    >
                                        <p className="pt-2 pr-8 text-gray-600">{item.a}</p>
                                    </motion.div>
                                )}
                            </AnimatePresence>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
};

const PricingSection = () => (
    <section id="comprar" className="py-20 md:py-28 bg-gray-50">
        <div className="max-w-7xl mx-auto px-6">
            <motion.div
                initial="initial" whileInView="animate" viewport={{ once: true }} variants={fadeIn}
                className="text-center mb-16"
            >
                <h2 className="text-4xl font-extrabold text-gray-900">Escolha a Melhor Oferta para Você</h2>
                <p className="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">Garanta sua pele renovada com descontos exclusivos por tempo limitado!</p>
            </motion.div>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
                {pricingPlans.map((plan, index) => (
                    <motion.div
                        key={index}
                        initial="initial" whileInView="animate" viewport={{ once: true }}
                        variants={fadeIn} transition={{ delay: index * 0.1 }}
                        className={cn(
                            "relative bg-white rounded-2xl p-8 border shadow-lg flex flex-col h-full",
                            plan.popular ? "border-blue-500 border-2" : "border-gray-200"
                        )}
                    >
                        {plan.popular && (
                            <div className="absolute top-0 -translate-y-1/2 left-1/2 -translate-x-1/2 bg-blue-600 text-white text-sm font-bold px-4 py-1 rounded-full">
                                MAIS VENDIDO
                            </div>
                        )}
                        <div className="flex-grow">
                            <img src={plan.imageSrc} alt={plan.productName} className="w-full rounded-lg mb-6" />
                            <h3 className="text-xl font-bold text-gray-900">{plan.title}</h3>
                            <p className="text-sm text-gray-500 mt-1">{plan.productName}</p>
                            
                            <div className="my-6">
                                <span className="text-gray-500 line-through">de R$ {plan.originalPrice}</span>
                                <p className="text-4xl font-extrabold text-gray-900">
                                    R$ {plan.price}
                                    <span className="bg-blue-100 text-blue-700 text-sm font-bold ml-2 px-2 py-1 rounded-md">
                                        -{plan.discount}
                                    </span>
                                </p>
                                <p className="text-gray-600 mt-1">{plan.installments}</p>
                            </div>
                        </div>
                        
                        <a href={plan.link} target="_blank" rel="noopener noreferrer" className="w-full bg-blue-600 text-white font-bold text-center py-3 rounded-lg hover:bg-blue-700 transition-transform duration-300 hover:scale-105">
                            Comprar Agora
                        </a>
                    </motion.div>
                ))}
            </div>
        </div>
    </section>
);

const WhatsAppButton = () => (
  <a 
    href="http://wa.me/5511952944709" 
    target="_blank" 
    rel="noopener noreferrer"
    className="fixed bottom-5 left-5 bg-green-500 text-white p-4 rounded-full shadow-lg hover:bg-green-600 transition-transform hover:scale-110 z-50 flex items-center justify-center"
    aria-label="Fale conosco pelo WhatsApp"
  >
    <IconWhatsApp className="w-8 h-8" />
  </a>
);

const Footer = ({ navigateTo }) => (
  <footer className="bg-gray-100 text-gray-600">
    <div className="max-w-7xl mx-auto px-6 py-12">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center md:text-left">
        <div className="md:col-span-1">
          <img src="https://i.imgur.com/RlWJsrh.png" alt="Rosa Arumã Logo" className="h-16 mx-auto md:mx-0" />
          <p className="mt-4 text-sm">
            Rosa Arumã – Loja especializada em dermocosméticos de alta qualidade, com produtos que cuidam da pele, realçam a beleza e entregam resultados visíveis.
          </p>
        </div>
        <div className="md:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-8">
            <div>
              <h3 className="font-bold text-gray-800 mb-4">Informações de Contato</h3>
              <div className="space-y-2 text-sm">
                <p><strong>CNPJ:</strong> 54.078.745/001-00</p>
                <p><strong>Endereço:</strong> Av. Marques Figueira, Vila Figueira, Suzano-SP CEP: 08676-010</p>
                <p><strong>Email:</strong> Contato@rosaaruma.com</p>
                <p><strong>Telefone:</strong> (11) 98150-0365</p>
              </div>
            </div>
             <div>
                <h3 className="font-bold text-gray-800 mb-4">Políticas</h3>
                <div className="flex flex-col space-y-2 text-sm items-center sm:items-start">
                    <a href="#privacy" onClick={(e) => { e.preventDefault(); navigateTo('privacy'); }} className="hover:text-blue-600 transition-colors">Políticas de Privacidade</a>
                    <a href="#terms" onClick={(e) => { e.preventDefault(); navigateTo('terms'); }} className="hover:text-blue-600 transition-colors">Termos de Uso</a>
                    <a href="#shipping" onClick={(e) => { e.preventDefault(); navigateTo('shipping'); }} className="hover:text-blue-600 transition-colors">Política de Frete</a>
                </div>
             </div>
        </div>
      </div>
       <div className="mt-8 border-t border-gray-200 pt-6 text-center text-xs text-gray-500">
            <p className="font-bold">ANVISA</p>
            <p>Agência Nacional de Vigilância Sanitária</p>
            <p>PROCESSO N° 25351.020278/2025-19</p>
       </div>
      <div className="mt-6 border-t border-gray-200 pt-6 flex flex-col sm:flex-row justify-center items-center text-sm">
        <p>&copy; {new Date().getFullYear()} Rosa Arumã. Todos os direitos reservados.</p>
      </div>
    </div>
  </footer>
);